<template>
  <header class="head"  v-if="userinfo">
        <h2>打卡管理系统</h2>

      <div class="infos">
          <el-button type="warning" icon=" el-icon-date"  @click="click1" style="margin-right:10px"  circle></el-button>
            <Calendar v-show="toggle" class="cal" />
          <div>
                <div  @click="drawer = true" class="click"></div>
                <Upload  :userinfo="userinfo" />
          </div>  
      </div>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        size="15%"
        :with-header="false"
        >   
            <div class="btn"> <Upload   :userinfo="userinfo"/> <span style="margin-left:5px">{{userinfo.username}}</span> </div>
            <div class="btn"  @click="updateone"><el-button @click="logout" type="info" size="mini" icon="el-icon-switch-button" circle></el-button><span style="margin-left:5px">修改密码</span></div>
            <div class="btn" @click="logout"><el-button  type="info" size="mini" icon="el-icon-switch-button" circle></el-button><span style="margin-left:5px">退出</span></div>
        </el-drawer>

         <el-dialog
            title="修改以用户"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form 
                :model="form" 
                :rules="rules"
                ref="form" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="旧密码" prop="pssd">
                    <el-input v-model="form.pssd" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入新密码"></el-input>
                </el-form-item>
            
                <el-form-item label="确认新密码" prop="psd">
                    <el-input  v-model="form.psd" placeholder="确认新密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateById()">确 定</el-button>
            </span>
        </el-dialog>
  </header>
</template>

<script>
import Upload from "@/components/upload.vue"
import {axios,baseURL} from "@/utils/axios"
import Calendar from "vue-calendar-component";
import {modify} from "@/api"
export default {
    props:['userinfo'],
    data(){
        return {
           
            drawer: false,
            dialogVisible:false,
             toggle: false,
            form:{},
            rules:{
                pssd:[
                    {required:true,message:"请输入旧号码",trigger:'blur'},
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'blur'
                    }
                ],
                psd:[
                    {required:true,message:"请输入确认密码",trigger:"change"},
                     {
                        validator:(rule, value, callback)=>{
                            if(this.form.password == value){
                                callback()
                            }else{
                                callback(new Error("两次输入密码不同"))
                            }
                        },
                        trigger:'blur'
                    }
                ],
            }
        }
    },
    components:{
        Upload,
          Calendar,
    },
    mouted(){
    },
    methods:{
        click1() {
      console.log(111);
      this.toggle = !this.toggle;
    },
        logout(){
             this.$confirm('你确定要退出登录吗, 是否继续?', '退出提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem("token");  // token 判断是否登录的标志
                    this.$router.push({name:"login"})
                }).catch(() => {

                });
        },
        updateone( ){
            this.dialogVisible = true

        },
        updateById(){
            this.form.mobile = localStorage.getItem("mobile") 
            modify(this.form)
            .then(res=>{
            })
        },
        handleClose(){
            this.dialogVisible = false
        },
    },
   
}
</script>

<style lang="scss" scoped>
    .head{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        h2{
            color: #fff;
            font-size: 24px; 
        }
        img{
             width: 45px;
            height: 45px;
            border-radius:50%;
        }
        .infos{
            display: flex;
            align-items: center;
            p{
                margin: 0 8px;
                cursor: pointer;
            }
        }
        .click{
            position: absolute;
            width: 45px;
            height: 45px;
            background: rgba(0,0,0,0);
        }
        .btn{
            margin-top: 15px;
            margin-left: 25px;
            font-size: 12px;
            display: flex;
            align-items: center;
            color: honeydew;
        }
    }
    ::v-deep .el-drawer__body{
        background: #000;
    }

   .cal {
    width: 300px;
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 1000;
  }
</style>